<!-- 客户版一级标签栏 -->
<template>
	<view class="tabbar-placeholder" :style="{'padding-bottom': safeAreaBottom}">
		<!-- 标签栏 -->
		<view class="fix-wrap tabbar" :style="{'padding-bottom': safeAreaBottom}">
			<view :class="['item',{'active':item.index == tabbarIndex}]" v-for="item in tabbars" :key="item.index"
				@click="handleRelaunch(item)">
				<view class="icon-box">
					<image v-if="item.index == tabbarIndex" class="icon" :src="item.selectIcon" mode="widthFix"></image>
					<image v-else :src="item.icon" class="icon" mode="widthFix"></image>
					<view v-if="item.count>0" class="count">{{item.count>99?'99+':item.count}}</view>
				</view>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue';

	const props = defineProps({
		index: 0, // tabBar 的哪一项，从左边算起
	});

	// 底部安全距离
	const safeAreaBottom = getApp().globalData.safeAreaBottom + 'px';

	const tabbarIndex = ref(props.index);
	const tabbars = [{
			name: '工作台',
			index: 1,
			icon: '/static/images/tabbar-business/work.svg',
			selectIcon: '/static/images/tabbar-business/work-active.svg',
			count: 0,
			url: '/pages/index/index'
		},
		{
			name: '商品管理',
			index: 2,
			icon: '/static/images/tabbar-business/goods.svg',
			selectIcon: '/static/images/tabbar-business/goods-active.svg',
			count: 0,
			url: '/pagesB-goods-manage/index/index'
		},
		{
			name: '需求大厅',
			index: 3,
			icon: '/static/images/tabbar-business/need.svg',
			selectIcon: '/static/images/tabbar-business/need-active.svg',
			count: 0,
			url: '/pagesB-need/index/index'
		},
		{
			name: '站点管理',
			index: 4,
			icon: '/static/images/tabbar-business/location.svg',
			selectIcon: '/static/images/tabbar-business/location-active.svg',
			count: 0,
			url: '/pagesB-shop/index/index'
		},
		{
			name: '店铺中心',
			index: 5,
			icon: '/static/images/tabbar-business/shop.svg',
			selectIcon: '/static/images/tabbar-business/shop-active.svg',
			count: 0,
			url: '/pagesB-shop-center/index/index'
		}
	];

	// 显示发布的动画
	const showPostAnimate = ref(false);
	// 页面重加载
	const handleRelaunch = (item) => {
		if (props.index == item.index) return;
		if (!item.url) return uni.showToast({ icon: 'none', title: '开发中' });

		uni.reLaunch({
			url: item.url
		});
	}
</script>

<style lang="scss" scoped>
	.tabbar-placeholder {
		position: relative;
		height: 50px;

		.fix-wrap {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 1000;
			width: 100%;
			height: 50px;
			background: #fff;
			border-top: 1rpx solid #eee;
		}
	}

	.tabbar {
		display: flex;
		justify-content: space-around;
		height: 50px;

		.item {
			width: 1%;
			flex-grow: 1;
			text-align: center;
			color: #999;

			.name {
				font-size: 24rpx;
			}

			.icon-box {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50rpx;
				height: 50rpx;
				margin: 8rpx auto 0;

				.icon {
					width: 80%;
					height: 80%;
				}

				.iconfont {
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
				}

				.count {
					position: absolute;
					left: 28rpx;
					top: -5rpx;
					z-index: 1;
					min-width: 14rpx;
					padding: 0 8rpx;
					height: 30rpx;
					line-height: 30rpx;
					background: #FE3C26;
					border-radius: 38rpx;
					color: #fff;
					font-size: 22rpx;
				}
			}
		}

		.active {
			color: #FE3C26;
		}
	}
</style>